<template>
	<view id="read_book" @click="showTool()" :class="{'show_tool':tool}">
		<view class="content" :style="{fontSize: fontSize+'px'}">
			<!-- <u-parse :html="bookContent"></u-parse> -->
			<text style="line-height: 1.8;" user-select=true>{{bookContent}}</text>
		</view>
		<view class="suspension" @click.stop>
			<view class="fontSize">
				字号 <text @click="fontAdd">+</text> <text @click="fontSub">-</text>
				
			</view>
			<view class="chapter">
				<view class="pre_chapter" @click="preChapterFun">上一章</view>
				<view class="next_chapter" @click="nextChapter">下一章</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { findContent } from '../../util/request/book.js'
	import marked from 'marked'
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		data() {
			return {
				chapter_chapterId: 0,
				book_id: 0,
				bookContent: "",
				nextContent: "",
				nextTitle: "",
				title: "",
				tool: false,
				fontSize: 14,
			}
		},
		
		onLoad(option) {
			this.chapter_chapterId = option.chapter_chapterId || 1;
			this.book_id = option.book_id || 5989;
			this.getBookContent();
		},
		
		onReady() {
			
		},
		
		methods:{
			/**
			 * 获取内容
			 */
			getBookContent(flag) {
				let that = this;
				
				// if(!flag){
					// that.chapter_chapterId ++;
					findContent( { book_type: 1, book_id: that.book_id, chapter_chapterId: that.chapter_chapterId} )
					.then(res=>{
						if(res.content_content=="此章节暂无资源"){
							that.$refs.uToast.show({
								title: '没有更多了',
							})
							return;
						}
						res.content_content.replace(/↵/g, "\\n\\r")
						that.bookContent = res.content_content.replace(/↵/g, "\\n\\r");
						
						uni.setNavigationBarTitle({
						    title: res.content_title
						});
						
						uni.setNavigationBarColor({
						    frontColor: '#000000',
						    backgroundColor: "#FAF9DE",
						  
						})
					
					})
				// }
	
	
	// //下一章
	// 				findContent( { book_type: 1, book_id: that.book_id, chapter_chapterId: that.chapter_chapterId} )
	// 				.then(res=>{
	// 					res.content_content.replace(/↵/g, "\\n\\r")
						
	// 					that.nextContent = res.content_content.replace(/↵/g, "\\n\\r");
	// 					that.nextTitle = res.content_title
					
	// 				})
				
				
			},
			
			
			/**
			 * 显示/隐藏 底部工具
			 */
			showTool() {
				this.tool = !this.tool
			},
			
			/**
			 * 字体减小
			 */
			fontSub() {
				if(this.fontSize>=12)this.fontSize --;
				else{
					this.$refs.uToast.show({
						title: '已经是最小号了',
					})
				}
			},
			
			/**
			 * 字体加大
			 */
			fontAdd() {
				if(this.fontSize<=20)this.fontSize ++;
				else {
					this.$refs.uToast.show({
						title: '已经是最大号了',
					})
				}
			},
			
			/**
			 * 下一章 
			 */
			nextChapter() {
				this.chapter_chapterId ++;
				this.getBookContent(true);
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			
			
			/**
			 * 上一章 
			 */
			preChapterFun() { 
				this.chapter_chapterId --;
				this.getBookContent();
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/components/u-parse/u-parse.css");
	
	#read_book.show_tool{
		.suspension{
			bottom: 0;
			}
	}
	#read_book{
		padding: 30rpx;
		width: 100%;
		background-color: #FAF9DE;
		
		view{
			transition: bottom .3s linear;
		}
		.content{
			text{
				
			}
		}
		
		.suspension{
			position: fixed;
			width: 100%;
			bottom: -200rpx;
			padding:22rpx 30rpx;
			left:0;
			height:200rpx;
			background-color: #fff;
			
			.chapter{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				view{
					border-radius: 50rpx;
					padding:16rpx 50rpx;
					border: 1rpx solid #f2f2f2;
				}
			}
			
			.fontSize{
				display: flex;
				flex-direction: row;
				justify-content: center;
				text{
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background-color: #f3f3f3;
					border-radius: 50rpx;
					margin-left:50rpx;
				}
			}
		}
	}
</style>
